<template lang="">
  <a-table :columns="columns" :data="data" :pagination="pagination" 
  
  :row-selection="selectedRowKeys"
    :onChange="onSelectChange"
  >
  <template #index="{ rowIndex }">
          <span>{{ rowIndex + 1 }}</span>
  </template>
<template #image={record}>
    <a-image  width="90" height="90" :src="record.image"/>
  </template>
<template #op="{ record }">
          <a-space #default="scope">
              <a-button type="primary" status="danger" size="mini">
                <template #icon>
                  <icon-delete @click="del(record.id)" />
               </template>

</a-button>
</a-space>
</template>
</a-table>

</template>
<script>
import { getShopCartAPI, deleteShopCartAPI } from "../../api/api"
import { imgs } from '../../tools/request'
import { reactive, ref } from 'vue'
export default {
  data() {
    return {
      selectedRowKeys: [],
      ids: "",
      data: [{
        id: "",
        name: "",
        desc: "",
        image: "",
      }],
      pagination: { pageSize: 4 },
      columns: [
        {
          title: '序号',
          slotName: 'index'
        },
        {
          title: '名字',
          dataIndex: 'name'
        },
        {
          title: '主图',
          slotName: 'image',
          dataIndex: 'image'
        },
        {
          title: '描述',
          dataIndex: 'desc',
          width: 600
        },
        {
          title: '操作',
          slotName: 'op',
          align: 'center'
        }
      ]
      
    }

  },
  methods: {

    list() {
      getShopCartAPI().then(res => {
        console.log(res);
        //this.data=res.data.list
        this.data = res.data.list.map(item => ({
          ...item,
          image: imgs(item.medicine.image),
          desc: item.medicine.desc,
          name: item.medicine.name,
          id: item.id
        }))
      })
      console.log(this.data);

    },
    async del(id) {
      console.log('ok')
      console.log(id)
      let res = await deleteShopCartAPI(id)
      console.log(res)
      this.list()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      // 1、单选中某条数据进入
      if (selectedRowKeys.length === 1) {
        // 4、当前两条数据选中，取消一条选中进入
        if (this.selectedRows.includes(selectedRows[0])) {
          this.selectedRows = this.selectedRows.filter(
            (item) => item.id === selectedRows[0].id
          )
          this.selectedRowKeys = this.selectedRowKeys.filter(
            (item) => item === selectedRows[0].id
          )
        } else {
          // 2、直接push
          this.selectedRows.push(selectedRows[0])
          this.selectedRowKeys.push(selectedRows[0].id)
        }
      } else {
        // 3、再选中某数据，或全选、全不选进入
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      }
    },
  },
  mounted() {
    this.list()

  }

}
</script>
<style lang="">

</style>